﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/share/_meta.jsp" %>
<%@ include file="/share/_footer.jsp" %>
<style type="text/css">
    .table > tbody > tr > td {
        text-align: center;
    }
</style>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>系统管理中心 <span
        class="c-gray en">&gt;</span> 小区信息
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
       href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
    <form id="myform" class="codeView docs-example" method="post">
        <div>
            <input id="ownerName" type="text" placeholder="业主名" class="input-text radius size-L" style="width:250px"
                   name="id">
            <div class="form-group">
                <select class="form-control" name="parentId" style="width:250px" id="parentId">
                    <option value='' disabled selected style='display:none;'>所有小区</option>
                    <c:forEach items="${parentList}" var="item">
                        <option value="${item.id}">${item.name}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" name="building" style="width:250px" id="building">
                    <option value='' disabled selected style='display:none;'>所有楼栋</option>
                    <!-- <option></option> -->
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" name="unit" style="width:250px" id="unit">
                    <option value='' disabled selected style='display:none;'>所有单元</option>
                    <!-- <option></option> -->
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" name="room" style="width:250px" id="room">
                    <option value='' disabled selected style='display:none;'>所有房间号</option>
                    <!-- <option></option> -->
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" name="status" style="width:250px" id="status">
                    <option value='' disabled selected style='display:none;'>状态</option>
                    <option></option>
                    <option value="0">未同步</option>
                    <option value="1">已同步</option>
                </select>
            </div>
        </div>
        <br>
        <div>
            <button type="button" class="btn btn-secondary radius size-L" onclick="queryList()">查&nbsp;询</button>
            <button type="button" class="btn btn-secondary radius size-L" onclick="info_add();">新&nbsp;增</button>
            <button type="button" class="btn btn-secondary radius size-L" onclick="room_list_sync();">批量同步</button>
            <button type="button" class="btn btn-secondary radius size-L" onclick="room_list_del();">批量删除</button>
            <button type="button" class="btn btn-warning radius size-L" onclick="excel_upload();">导入房屋</button>
            <button type="button" class="btn btn-warning radius size-L" onclick="excel_download();">下载模板</button>
            <button type="button" class="btn btn-secondary radius size-L" onclick="downloadRoomList();">导出房屋业主</button>
        </div>
        <div class="panel panel-default mt-20">
            <div class="panel-header">
                数据列表
            </div>
            <div class="panel-body">
                <table class="table table-border table-bordered table-bg table-hover table-sort table-striped">
                    <thead>
                    <tr class="text-c">
                        <th width="25"><input type="checkbox" name="" value=""></th>
                        <th>小区名称</th>
                        <th>支付宝房屋编号</th>
                        <th>组团</th>
                        <th>楼栋</th>
                        <th>单元</th>
                        <th>房号</th>
                        <th>完整门牌</th>
                        <th>业主姓名</th>
                        <th>业主身份证</th>
                        <th>业主电话</th>
                        <th>入住时间</th>
                        <th>状态</th>
                        <th>房间id</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <%--<c:forEach items="${roominfoList}" var="item">
                        <tr class="text-c">
                            <td>${ item.housingName }</td>
                            <td>${ item.roomId }</td>
                            <td>${ item.groupName }</td>
                            <td>${ item.building }</td>
                            <td>${ item.unit }</td>
                            <td>${ item.room }</td>
                            <td>${ item.address }</td>
                            <td>${ item.ownerName }</td>
                            <td>${ item.ownerCard }</td>
                            <td>${ item.ownerPhone }</td>
                            <td>${ item.entrydate }</td>
                            <td>
                                <c:if test="${ item.status==false }">未同步</c:if>
                                <c:if test="${ item.status==true }">已同步</c:if>
                            </td>
                            <td>
                                <c:if test="${ item.status==false }">
                                    <a title="同步支付宝" style="text-decoration:none" onclick="room_sync(${item.id })" href="javascript:;" class="c-success">同步支付宝</a>
                                </c:if>
                                <a title="业主入住" style="text-decoration:none" onClick="info_edit(${item.id })" href="javascript:;" class="c-success">业主入住</a>
                                <a title="删除" style="text-decoration:none" onclick="info_del(this, ${item.id })" href="javascript:;" class="c-success">删除</a>
                            </td>
                        </tr>
                    </c:forEach>--%>
                    </tbody>
                </table>
                <br>
                <br>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript"
        src="${pageContext.request.contextPath}/h-ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    $(function () {
        queryList();
    })

    function queryList() {
        $(".table-sort").dataTable().fnDestroy();
        $(".table-sort").DataTable({
            bStateSave: false,
            aLengthMenu: [[10, 25, 50, 100], ["10条", "25条", "50条", "100条"]],
            pageLength: 10,
            searching: false,
            bFilter: false,
            bSort: false,
            bStateSave: false,
            //aLengthMenu:[10],
            serverSide: true,//实现后台分页
            lengthChange: true,
            bPaginate: true,
            ajax: {
                url: "${pageContext.request.contextPath}/rest/roominfo/tableRoominfoList",
                dataSrc: "data",
                data: function (d) {
                    d.ownerName = $("#ownerName").val();
                    d.parentId = $("#parentId option:selected").val();
                    d.status = $("#status option:selected").val();
                    d.building = $("#building option:selected").val();
                    d.unit = $("#unit option:selected").val();
                    d.room = $("#room option:selected").val();
                }
            },
            /*fnDrawCallback: function () {
             var api = this.api();
             api.column(0).nodes().each(function (cell, i) {
             cell.innerHTML = i + 1;
             });
             },*/
            aoColumns: [//列绑定
                {"data": "id"},
                {"data": "housingName"},
                {"data": "roomId"},
                {"data": "groupName"},
                {"data": "building"},
                {"data": "unit"},
                {"data": "room"},
                {"data": "address"},
                {"data": "ownerName"},
                {"data": "ownerCard"},
                {"data": "ownerPhone"},
                {"data": "entrydate"},
                {"data": "status"},
                {"data": "id"},
                {"data": "id"}

            ],
            aoColumnDefs: [//列定义
                {
                    "aTargets": [0],
                    "mData": "id",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return "<input type='checkbox' name='ids' value=" + data + ">";
                    }
                }, {
                    "aTargets": [1],
                    "mData": "housingName",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [2],
                    "mData": "roomId",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [3],
                    "mData": "groupName",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [4],
                    "mData": "building",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [5],
                    "mData": "unit",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [6],
                    "mData": "room",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [7],
                    "mData": "address",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [8],
                    "mData": "ownerName",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [9],
                    "mData": "ownerCard",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [10],
                    "mData": "ownerPhone",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [11],
                    "mData": "entrydate",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [12],
                    "mData": "status",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        if (data == true) {
                            return "已同步";
                        } else if (data == false) {
                            return "未同步";
                        } else {
                            return "";
                        }
                    }
                }, {
                    "aTargets": [13],
                    "mData": "id",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [14],
                    "mData": "id",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        var returnHtml = "";
                        if (full.status == false) {
                            returnHtml += "<a title='同步支付宝' style='text-decoration:none' onclick='room_sync(" + data + ")' href='javascript:;' class='c-success'>同步支付宝</a><br/>";
                        }
                        returnHtml += "<a title='业主入住' style='text-decoration:none' onClick='info_edit(" + data + ")' href='javascript:;' class='c-success'>业主入住</a><br/>";
                            /*+ "<a title='删除' style='text-decoration:none' onclick='info_del(this, " + data + ")' href='javascript:;' class='c-success'>删除</a>";*/
                        return returnHtml;
                    }
                }
            ],
            language: {
                aria: {
                    sortAscending: ": activate to sort column ascending",
                    sortDescending: ": activate to sort column descending"
                },
                emptyTable: "没有数据",
                info: "从 _START_ 到 _END_ 共 _TOTAL_ 条",
                infoEmpty: "没有数据",
                infoFiltered: "(0 到 _MAX_ 条)",
                lengthMenu: " _MENU_",
                search: "查询:",
                zeroRecords: "没有数据",
                paginate: {previous: "<", next: ">", last: "最后一页", first: "第一页"}
            }
        })
    }

    function info_add() {
        var index = layer.open({
            type: 2,
            title: "新增房屋信息",
            content: "${pageContext.request.contextPath }/rest/roominfo/openRoominfo",
        });
        layer.full(index);
    }

    function info_edit(id) {
        var index = layer.open({
            type: 2,
            title: "修改小区信息",
            content: "${pageContext.request.contextPath }/rest/roominfo/openRoominfo?id=" + id,
        });
        layer.full(index);
    }

    function info_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath }/rest/roominfo/deleteRoominfo',
                dataType: 'json',
                data: {
                    ids: id
                },
                success: function (data) {
                    if (data.success) {
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!', {icon: 1, time: 1000});
                    }
                },
                error: function (data) {
                    layer.msg('error!', {icon: 1, time: 1000});
                },
            });
        });
    }

    function room_list_del(id) {
        layer.confirm('确认要删除吗？', function (index) {
            $("#myform").ajaxSubmit({
                url: "${pageContext.request.contextPath }/rest/roominfo/deleteRoominfo",
                success: function (data) {
                    if (data.success) {
                        window.location.reload();
                    } else {
                        layer.alert(data.message);
                    }
                },
                error: function (XmlHttpRequest, textStatus, errorThrown) {
                    layer.alert('error!', {icon: 1, time: 2000});
                }
            });
        });
    }

    function room_sync(id) {
        $.ajax({
            type: 'POST',
            url: '${pageContext.request.contextPath }/rest/alipay/roominfoUploadRequest',
            dataType: 'json',
            data: {
                id: id
            },
            beforeSubmit: function () {
                layer.load();
            },
            success: function (data) {
                layer.closeAll('loading');
                if (data.success) {
                    window.location.reload();
//					layer.msg("同步支付宝成功!", {icon: 1});
//					$("#stat").html("已同步");
                } else {
                    layer.alert(data.message, {icon: 5});
                }
            },
            error: function (data) {
                layer.closeAll('loading');
                layer.msg('error!', {icon: 1, time: 1000});
            },
        });
    }

    function room_list_sync() {
        layer.confirm('确认要同步吗？', function (index) {
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath }/rest/alipay/allRoominfoUploadRequest',
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        window.location.reload();
                    } else {
                        layer.alert(data.message, {icon: 5});
                    }
                },
                error: function (data) {
                    layer.msg('error!', {icon: 1, time: 1000});
                },
            });
        });
    }

    function excel_upload() {
        layer_show("导入房屋", "${pageContext.request.contextPath }/rest/openRoomExcel", 800, 500);
    }

    function excel_download() {
        window.location.href = "${pageContext.request.contextPath }/rest/downloadRoominfo";
    }

    //选中小区触发事件
    $("#parentId").change(function () {
        var parentId = $("#parentId option:selected").val();
        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/rest/roominfo/queryBuildingByHousingId",
            data: {
                "parentId": parentId
            },
            success: function (data) {
                var html = "<option value=''>所有楼栋</option>";
                $.each(data, function (index, item) {
                    html += "<option value=" + item.name + ">" + item.name + "</option>";
                })
                $("#building").html(html);
            }
        })
    });

    //选中楼栋触发事件
    $("#building").change(function () {
        var parentId = $("#parentId option:selected").val();
        var building = $("#building option:selected").val();
        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/rest/roominfo/queryUnitByBuilding",
            data: {
                "parentId": parentId,
                "building": building
            },
            success: function (data) {
                var html = "<option value=''>所有单元</option>";
                $.each(data, function (index, item) {
                    html += "<option value=" + item.name + ">" + item.name + "</option>";
                })
                $("#unit").html(html);
            }
        })
    });

    //选中房间号触发事件
    $("#unit").change(function () {
        var parentId = $("#parentId option:selected").val();
        var building = $("#building option:selected").val();
        var unit = $("#unit option:selected").val();
        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/rest/roominfo/queryRoominfoIdByUnit",
            data: {
                "parentId": parentId,
                "building": building,
                "unit": unit
            },
            success: function (data) {
                var html = "<option value=''>所有房间号</option>";
                $.each(data, function (index, item) {
                    html += "<option value=" + item.name + ">" + item.name + "</option>";
                })
                $("#room").html(html);
            }
        })
    });

    function downloadRoomList() {
        var parentId = $("#parentId").val();
        if (parentId === null) {
            layer.alert("请选择小区！");
            return;
        }
        var url = "${pageContext.request.contextPath }/rest/roominfo/downloadRoomList";
        $('#myform').attr("action", url).submit();
    }
</script>

